/* =========================== */
/* Global CSS for 'base' theme */
/* =========================== */

// ===========================
// Semantic Theming Mapping
// ===========================

// ==========================================================
// Quick Theming (these Parameters can be linked in controls)
// ==========================================================

@sapUiBrand: @sapBrandColor;
@sapUiHighlight: @sapHighlightColor;
@sapUiBaseColor: @sapBaseColor;
@sapUiShellColor: @sapShellColor;
@sapUiBaseBG: @sapBackgroundColor;
@sapUiGlobalBackgroundColor: @sapBackgroundColor;

@sapUiFontFamily: @sapFontFamily;
@sapUiFontHeaderFamily: @sapFontHeaderFamily;
@sapUiFontSize: medium; // @sapFontSize;
@sapMFontSmallSize: @sapFontSmallSize;
@sapMFontMediumSize: @sapFontSize;
@sapMFontLargeSize: @sapFontLargeSize;
@sapMFontHeader1Size: @sapFontHeader1Size;
@sapMFontHeader2Size: @sapFontHeader2Size;
@sapMFontHeader3Size: @sapFontHeader3Size;
@sapMFontHeader4Size: @sapFontHeader4Size;
@sapMFontHeader5Size: @sapFontHeader5Size;
@sapMFontHeader6Size: @sapFontHeader6Size;

@sapUiBaseText: @sapTextColor;
@sapUiLink: @sapLinkColor;

@sapUiGlobalLogo: @sapCompanyLogo;
@sapUiGlobalBackgroundImage: @sapBackgroundImage;
@sapUiBackgroundImage: @sapBackgroundImage;
@sapUiUx3ShellBackgroundImageURL: @sapBackgroundImage;

@sapUiGlobalBackgroundImageOpacity: @sapBackgroundImageOpacity;
@sapUiGlobalBackgroundRepeat: @sapBackgroundImageRepeat;

// ==============================================================
// Expert Theming (these Parameters should be linked in controls)
// ==============================================================

@sapUiSelected: @sapSelectedColor;
@sapUiActive: @sapActiveColor;
@sapUiHighlightTextColor: @sapHighlightTextColor;
@sapUiTextTitle: @sapTitleColor;

@sapUiLinkHover: @sapLink_Hover_Color;
@sapUiLinkActive: @sapLink_Active_Color;
@sapUiLinkVisited: @sapLink_Visited_Color;
@sapUiLinkInverted: @sapLink_InvertedColor;

@sapUiElementLineHeight: @sapElement_LineHeight;
@sapUiElementHeight: @sapElement_Height;
@sapUiElementBorderWidth: @sapElement_BorderWidth;
@sapUiElementBorderCornerRadius: @sapElement_BorderCornerRadius;
@sapUiElementCompactLineHeight: @sapElement_Compact_LineHeight;
@sapUiElementCompactHeight: @sapElement_Compact_Height;
@sapUiElementCondensedLineHeight: @sapElement_Condensed_LineHeight;
@sapUiElementCondensedHeight: @sapElement_Condensed_Height;

@sapUiContentLineHeight: @sapContent_LineHeight;
@sapUiContentElementHeight: @sapContent_ElementHeight;
@sapUiContentElementHeightPX: @sapContent_ElementHeight_PX;
@sapUiContentIconHeight: @sapContent_IconHeight;
@sapUiContentIconColor: @sapContent_IconColor;
@sapUiContentContrastIconColor: @sapContent_ContrastIconColor;
@sapUiContentNonInteractiveIconColor: @sapContent_NonInteractiveIconColor;
@sapUiContentMarkerIconColor: @sapContent_MarkerIconColor;
@sapUiContentMarkerTextColor: @sapContent_MarkerTextColor;
@sapUiContentImagePlaceholderBackground: @sapContent_ImagePlaceholderBackground;
@sapUiContentImagePlaceholderForegroundColor: @sapContent_ImagePlaceholderForegroundColor;
@sapUiContentRatedColor: @sapContent_RatedColor;
@sapUiContentUnratedColor: @sapContent_UnratedColor;
@sapUiContentFocusColor: @sapContent_FocusColor;
@sapUiContentFocusStyle: @sapContent_FocusStyle;
@sapUiContentFocusWidth: @sapContent_FocusWidth;
@sapUiContentContrastFocusColor: @sapContent_ContrastFocusColor;
@sapUiContentShadowColor: @sapContent_ShadowColor;
@sapUiContentContrastShadowColor: @sapContent_ContrastShadowColor;
@sapUiContentShadow0: @sapContent_Shadow0;
@sapUiContentShadow1: @sapContent_Shadow1;
@sapUiContentShadow2: @sapContent_Shadow2;
@sapUiContentShadow3: @sapContent_Shadow3;
@sapUiContentTextShadow: @sapContent_TextShadow;
@sapUiContentHeaderShadow: @sapContent_HeaderShadow;
@sapUiContentSearchHighlightColor: @sapContent_SearchHighlightColor;
@sapUiContentHelpColor: @sapContent_HelpColor;
@sapUiContentLabelColor: @sapContent_LabelColor;
@sapUiContentDisabledTextColor: @sapContent_DisabledTextColor;
@sapUiContentDisabledOpacity: @sapContent_DisabledOpacity;
@sapUiContentContrastTextThreshold: @sapContent_ContrastTextThreshold;
@sapUiContentContrastTextColor: @sapContent_ContrastTextColor;
@sapUiContentForegroundColor: @sapContent_ForegroundColor;
@sapUiContentForegroundBorderColor: @sapContent_ForegroundBorderColor;
@sapUiContentForegroundTextColor: @sapContent_ForegroundTextColor;
@sapUiContentBadgeBackground: @sapContent_BadgeBackground;
@sapUiContentDragAndDropActiveColor: @sapContent_DragAndDropActiveColor;

@sapUiShellBackground: @sapShell_Background;
@sapUiShellBackgroundImage: @sapShell_BackgroundImage;
@sapUiShellBackgroundImageOpacity: @sapShell_BackgroundImageOpacity;
@sapUiShellBackgroundImageRepeat: @sapShell_BackgroundImageRepeat;
@sapUiShellBackgroundGradient: @sapShell_BackgroundGradient;
@sapUiShellBorderColor: @sapShell_BorderColor;
@sapUiShellTextColor: @sapShell_TextColor;
@sapUiShellInteractiveTextColor: @sapShell_InteractiveTextColor;
@sapUiShellInteractiveBorderColor: @sapShell_InteractiveBorderColor;
@sapUiShellGroupTitleTextColor: @sapShell_GroupTitleTextColor;
@sapUiShellHoverBackground: @sapShell_Hover_Background;
@sapUiShellActiveBackground: @sapShell_Active_Background;
@sapUiShellActiveTextColor: @sapShell_Active_TextColor;
@sapUiShellSelectedBackground: @sapShell_Selected_Background;
@sapUiShellSelectedTextColor: @sapShell_Selected_TextColor;
@sapUiShellSelectedHoverBackground: @sapShell_Selected_Hover_Background;
@sapUiShellFavicon: @sapShell_Favicon;
@sapUiShellNavigationBackground: @sapShell_Navigation_Background;
@sapUiShellNavigationSelectedColor: @sapShell_Navigation_SelectedColor;
@sapUiShellNavigationSelectedTextColor: @sapShell_Navigation_Selected_TextColor;
@sapUiShellNavigationTextColor: @sapShell_Navigation_TextColor;
@sapUiShellShadow: @sapShell_Shadow;

@sapUiButtonBorderWidth: @sapButton_BorderWidth;
@sapUiButtonBorderCornerRadius: @sapButton_BorderCornerRadius;
@sapUiButtonBackground: @sapButton_Background;
@sapUiButtonBorderColor: @sapButton_BorderColor;
@sapUiButtonTextColor: @sapButton_TextColor;
@sapUiButtonDisabledBackground: @sapButton_Disabled_Background;
@sapUiButtonDisabledBorderColor: @sapButton_Disabled_BorderColor;
@sapUiButtonDisabledTextColor: @sapButton_Disabled_TextColor;
@sapUiButtonHoverBackground: @sapButton_Hover_Background;
@sapUiButtonHoverBorderColor: @sapButton_Hover_BorderColor;
@sapUiButtonHoverTextColor: @sapButton_Hover_TextColor;
@sapUiButtonIconColor: @sapButton_IconColor;
@sapUiButtonActiveBackground: @sapButton_Active_Background;
@sapUiButtonActiveBorderColor: @sapButton_Active_BorderColor;
@sapUiButtonActiveTextColor: @sapButton_Active_TextColor;
@sapUiButtonEmphasizedBackground: @sapButton_Emphasized_Background;
@sapUiButtonEmphasizedBorderColor: @sapButton_Emphasized_BorderColor;
@sapUiButtonEmphasizedTextColor: @sapButton_Emphasized_TextColor;
@sapUiButtonEmphasizedHoverBackground: @sapButton_Emphasized_Hover_Background;
@sapUiButtonEmphasizedHoverBorderColor: @sapButton_Emphasized_Hover_BorderColor;
@sapUiButtonEmphasizedHoverTextColor: @sapButton_Emphasized_Hover_TextColor;
@sapUiButtonEmphasizedActiveBackground: @sapButton_Emphasized_Active_Background;
@sapUiButtonEmphasizedActiveBorderColor: @sapButton_Emphasized_Active_BorderColor;
@sapUiButtonEmphasizedTextShadow: @sapButton_Emphasized_TextShadow;
@sapUiButtonEmphasizedFontWeight: @sapButton_Emphasized_FontWeight;
@sapUiButtonRejectBackground: @sapButton_Reject_Background;
@sapUiButtonRejectBorderColor: @sapButton_Reject_BorderColor;
@sapUiButtonRejectHoverBackground: @sapButton_Reject_Hover_Background;
@sapUiButtonRejectHoverBorderColor: @sapButton_Reject_Hover_BorderColor;
@sapUiButtonRejectHoverTextColor: @sapButton_Reject_Hover_TextColor;
@sapUiButtonRejectActiveBackground: @sapButton_Reject_Active_Background;
@sapUiButtonRejectActiveBorderColor: @sapButton_Reject_Active_BorderColor;
@sapUiButtonRejectTextColor: @sapButton_Reject_TextColor;
@sapUiButtonAcceptBackground: @sapButton_Accept_Background;
@sapUiButtonAcceptBorderColor: @sapButton_Accept_BorderColor;
@sapUiButtonAcceptHoverBackground: @sapButton_Accept_Hover_Background;
@sapUiButtonAcceptHoverBorderColor: @sapButton_Accept_Hover_BorderColor;
@sapUiButtonAcceptHoverTextColor: @sapButton_Accept_Hover_TextColor;
@sapUiButtonAcceptActiveBackground: @sapButton_Accept_Active_Background;
@sapUiButtonAcceptActiveBorderColor: @sapButton_Accept_Active_BorderColor;
@sapUiButtonAcceptTextColor: @sapButton_Accept_TextColor;
@sapUiButtonLiteBackground: @sapButton_Lite_Background;
@sapUiButtonLiteBorderColor: @sapButton_Lite_BorderColor;
@sapUiButtonLiteTextColor: @sapButton_Lite_TextColor;
@sapUiButtonLiteHoverBackground: @sapButton_Lite_Hover_Background;
@sapUiButtonLiteHoverBorderColor: @sapButton_Lite_Hover_BorderColor;
@sapUiButtonLiteHoverTextColor: @sapButton_Lite_Hover_TextColor;
@sapUiButtonLiteActiveBackground: @sapButton_Lite_Active_Background;
@sapUiButtonLiteActiveBorderColor: @sapButton_Lite_Active_BorderColor;
@sapUiButtonSelectedBackground: @sapButton_Selected_Background;
@sapUiButtonSelectedBorderColor: @sapButton_Selected_BorderColor;
@sapUiButtonSelectedTextColor: @sapButton_Selected_TextColor;
@sapUiButtonSelectedHoverBackground: @sapButton_Selected_Hover_Background;
@sapUiButtonSelectedHoverBorderColor: @sapButton_Selected_Hover_BorderColor;

@sapUiFieldBorderWidth: @sapField_BorderWidth;
@sapUiFieldBorderCornerRadius: @sapField_BorderCornerRadius;
@sapUiFieldBackground: @sapField_Background;
@sapUiFieldBorderColor: @sapField_BorderColor;
@sapUiFieldTextColor: @sapField_TextColor;
@sapUiFieldPlaceholderTextColor: @sapField_PlaceholderTextColor;
@sapUiFieldHelpBackground: @sapField_HelpBackground;
@sapUiFieldHoverBackground: @sapField_Hover_Background;
@sapUiFieldHoverBorderColor: @sapField_Hover_BorderColor;
@sapUiFieldHoverHelpBackground: @sapField_Hover_HelpBackground;
@sapUiFieldActiveBorderColor: @sapField_Active_BorderColor;
@sapUiFieldFocusBackground: @sapField_Focus_Background;
@sapUiFieldFocusBorderColor: @sapField_Focus_BorderColor;
@sapUiFieldFocusHelpBackground: @sapField_Focus_HelpBackground;
@sapUiFieldReadOnlyBackground: @sapField_ReadOnly_Background;
@sapUiFieldReadOnlyBorderColor: @sapField_ReadOnly_BorderColor;
@sapUiFieldReadOnlyHelpBackground: @sapField_ReadOnly_HelpBackground;
@sapUiFieldDisabledBackground: @sapField_Disabled_Background;
@sapUiFieldDisabledBorderColor: @sapField_Disabled_BorderColor;
@sapUiFieldDisabledTextColor: @sapField_Disabled_TextColor;
@sapUiFieldDisabledHelpBackground: @sapField_Disabled_HelpBackground;
@sapUiFieldRequiredColor: @sapField_RequiredColor;
@sapUiFieldInvalidColor: @sapField_InvalidColor;
@sapUiFieldInvalidBackground: @sapField_InvalidBackground;
@sapUiFieldWarningColor: @sapField_WarningColor;
@sapUiFieldWarningBackground: @sapField_WarningBackground;
@sapUiFieldSuccessColor: @sapField_SuccessColor;
@sapUiFieldSuccessBackground: @sapField_SuccessBackground;
@sapUiFieldInformationColor: @sapField_InformationColor;
@sapUiFieldInformationBackground: @sapField_InformationBackground;

@sapUiGroupTitleBackground: @sapGroup_TitleBackground;
@sapUiGroupTitleBorderColor: @sapGroup_TitleBorderColor;
@sapUiGroupTitleTextColor: @sapGroup_TitleTextColor;
@sapUiGroupContentBackground: @sapGroup_ContentBackground;
@sapUiGroupContentBorderColor: @sapGroup_ContentBorderColor;
@sapUiGroupBorderWidth: @sapGroup_BorderWidth;
@sapUiGroupFooterBackground: @sapGroup_FooterBackground;

@sapUiToolbarBackground: @sapToolbar_Background;
@sapUiToolbarSeparatorColor: @sapToolbar_SeparatorColor;

@sapUiListHeaderBackground: @sapList_HeaderBackground;
@sapUiListHeaderBorderColor: @sapList_HeaderBorderColor;
@sapUiListHeaderTextColor: @sapList_HeaderTextColor;
@sapUiListBorderColor: @sapList_BorderColor;
@sapUiListBorderWidth: @sapList_BorderWidth;
@sapUiListTextColor: @sapList_TextColor;
@sapUiListActiveBackground: @sapList_Active_Background;
@sapUiListActiveTextColor: @sapList_Active_TextColor;
@sapUiListHighlightColor: @sapList_HighlightColor;
@sapUiListSelectionBackgroundColor: @sapList_SelectionBackgroundColor;
@sapUiListSelectionBorderColor: @sapList_SelectionBorderColor;
@sapUiListHoverSelectionBackground: @sapList_Hover_SelectionBackground;
@sapUiListBackground: @sapList_Background;
@sapUiListHoverBackground: @sapList_Hover_Background;
@sapUiListGroupHeaderBackground: @sapList_GroupHeaderBackground;
@sapUiListGroupHeaderBorderColor: @sapList_GroupHeaderBorderColor;
@sapUiListGroupHeaderTextColor: @sapList_GroupHeaderTextColor;
@sapUiListFooterBackground: @sapList_FooterBackground;
@sapUiListFooterTextColor: @sapList_FooterTextColor;
@sapUiListTableGroupHeaderBackground: @sapList_TableGroupHeaderBackground;
@sapUiListTableGroupHeaderBorderColor: @sapList_TableGroupHeaderBorderColor;
@sapUiListTableGroupHeaderTextColor: @sapList_TableGroupHeaderTextColor;
@sapUiListTableFooterBorder: @sapList_TableFooterBorder;
@sapUiListTableFixedBorderColor: @sapList_TableFixedBorderColor;

@sapUiScrollBarFaceColor: @sapScrollBar_FaceColor;
@sapUiScrollBarTrackColor: @sapScrollBar_TrackColor;
@sapUiScrollBarBorderColor: @sapScrollBar_BorderColor;
@sapUiScrollBarSymbolColor: @sapScrollBar_SymbolColor;
@sapUiScrollBarDimension: @sapScrollBar_Dimension;
@sapUiScrollBarHoverFaceColor: @sapScrollBar_Hover_FaceColor;

@sapUiPageHeaderBackground: @sapPageHeader_Background;
@sapUiPageHeaderBorderColor: @sapPageHeader_BorderColor;
@sapUiPageHeaderTextColor: @sapPageHeader_TextColor;
@sapUiPageFooterBackground: @sapPageFooter_Background;
@sapUiPageFooterBorderColor: @sapPageFooter_BorderColor;
@sapUiPageFooterTextColor: @sapPageFooter_TextColor;

@sapUiInfobarBackground: @sapInfobar_Background;
@sapUiInfobarHoverBackground: @sapInfobar_Hover_Background;
@sapUiInfobarActiveBackground: @sapInfobar_Active_Background;

@sapUiObjectHeaderBackground: @sapObjectHeader_Background;
@sapUiObjectHeaderBorderColor: @sapObjectHeader_BorderColor;

@sapUiBlockLayerBackground: @sapBlockLayer_Background;

@sapUiTileBackground: @sapTile_Background;
@sapUiTileHoverBackground: @sapTile_Hover_Background;
@sapUiTileActiveBackground: @sapTile_Active_Background;
@sapUiTileBorderColor: @sapTile_BorderColor;
@sapUiTileTitleTextColor: @sapTile_TitleTextColor;
@sapUiTileTextColor: @sapTile_TextColor;
@sapUiTileIconColor: @sapTile_IconColor;

@sapUiChart1: @sapChart_OrderedColor_1;
@sapUiChart2: @sapChart_OrderedColor_2;
@sapUiChart3: @sapChart_OrderedColor_3;
@sapUiChart4: @sapChart_OrderedColor_4;
@sapUiChart5: @sapChart_OrderedColor_5;
@sapUiChart6: @sapChart_OrderedColor_6;
@sapUiChart7: @sapChart_OrderedColor_7;
@sapUiChart8: @sapChart_OrderedColor_8;
@sapUiChart9: @sapChart_OrderedColor_9;
@sapUiChart10: @sapChart_OrderedColor_10;
@sapUiChart11: @sapChart_OrderedColor_11;

@sapUiChartBad: @sapChart_Bad;
@sapUiChartCritical: @sapChart_Critical;
@sapUiChartGood: @sapChart_Good;
@sapUiChartNeutral: @sapChart_Neutral;

@sapUiChartSequence1: @sapChart_Sequence_1;
@sapUiChartSequence2: @sapChart_Sequence_2;
@sapUiChartSequence3: @sapChart_Sequence_3;
@sapUiChartSequence4: @sapChart_Sequence_4;
@sapUiChartSequence5: @sapChart_Sequence_5;
@sapUiChartSequence6: @sapChart_Sequence_6;
@sapUiChartSequence7: @sapChart_Sequence_7;
@sapUiChartSequence8: @sapChart_Sequence_8;
@sapUiChartSequence9: @sapChart_Sequence_9;
@sapUiChartSequence10: @sapChart_Sequence_10;
@sapUiChartSequence11: @sapChart_Sequence_11;
@sapUiChartSequenceNeutral: @sapChart_Sequence_Neutral;


// ============================================
// UX Reference Set - do not use in Controls!!
// ============================================

// =====================================
// Accent Colors
// =====================================

@sapUiAccent1: @sapAccentColor1;
@sapUiAccent2: @sapAccentColor2;
@sapUiAccent3: @sapAccentColor3;
@sapUiAccent4: @sapAccentColor4;
@sapUiAccent5: @sapAccentColor5;
@sapUiAccent6: @sapAccentColor6;
@sapUiAccent7: @sapAccentColor7;
@sapUiAccent8: @sapAccentColor8;
@sapUiAccent9: @sapAccentColor9;
@sapUiAccent10: @sapAccentColor10;

@sapUiLegend1: @sapLegendColor1;
@sapUiLegend2: @sapLegendColor2;
@sapUiLegend3: @sapLegendColor3;
@sapUiLegend4: @sapLegendColor4;
@sapUiLegend5: @sapLegendColor5;
@sapUiLegend6: @sapLegendColor6;
@sapUiLegend7: @sapLegendColor7;
@sapUiLegend8: @sapLegendColor8;
@sapUiLegend9: @sapLegendColor9;
@sapUiLegend10: @sapLegendColor10;
@sapUiLegend11: @sapLegendColor11;
@sapUiLegend12: @sapLegendColor12;
@sapUiLegend13: @sapLegendColor13;
@sapUiLegend14: @sapLegendColor14;
@sapUiLegend15: @sapLegendColor15;
@sapUiLegend16: @sapLegendColor16;
@sapUiLegend17: @sapLegendColor17;
@sapUiLegend18: @sapLegendColor18;
@sapUiLegend19: @sapLegendColor19;
@sapUiLegend20: @sapLegendColor20;

// =====================================
// Semantic Colors
// =====================================

// Semantic Background Colors

@sapUiErrorBG:   lighten(@sapUiNegative, 58);
@sapUiWarningBG: lighten(@sapUiCritical, 46);
@sapUiSuccessBG: lighten(@sapUiPositive, 60);
@sapUiInformationBG: lighten(@sapUiInformative, 60);
@sapUiNeutralBG: lighten(@sapUiNeutral, 56);


// Semantic Border Colors

@sapUiErrorBorder:       @sapUiErrorColor;
@sapUiWarningBorder:     @sapUiWarningColor;
@sapUiSuccessBorder:     @sapUiSuccessColor;
@sapUiInformationBorder: @sapUiInformative;
@sapUiNeutralBorder:     @sapUiNeutral;


// Semantic Foreground Elements

@sapUiNegativeElement:    @sapUiNegative;
@sapUiCriticalElement:    @sapUiCritical;
@sapUiPositiveElement:    @sapUiPositive;
@sapUiInformativeElement: @sapUiInformative;
@sapUiNeutralElement:     @sapUiNeutral;


// Semantic Text

@sapUiNegativeText:    @sapUiNegative;
@sapUiCriticalText:    @sapUiCritical;
@sapUiPositiveText:    @sapUiPositive;
@sapUiInformativeText: @sapUiInformative;
@sapUiNeutralText:     @sapUiNeutral;


// =======================================================
// Semantic Foreground Colors - do not use in Controls!!
// =======================================================

@sapUiNegative:    @sapNegativeColor;
@sapUiCritical:    @sapCriticalColor;
@sapUiPositive:    @sapPositiveColor;
@sapUiInformative: @sapInformativeColor;
@sapUiNeutral:     @sapNeutralColor;

@sapUiErrorColor:   lighten(@sapUiNegative, 10);
@sapUiWarningColor: lighten(@sapUiCritical, 10);
@sapUiSuccessColor: lighten(@sapUiPositive, 10);


// =====================================
// Indication Colors
// =====================================

@sapUiIndication1: @sapIndicationColor_1;
@sapUiIndication2: @sapIndicationColor_2;
@sapUiIndication3: @sapIndicationColor_3;
@sapUiIndication4: @sapIndicationColor_4;
@sapUiIndication5: @sapIndicationColor_5;



// =====================================
// Font
// =====================================

@sapUiFontCondensedFamily: 'Arial Narrow', HelveticaNeue-CondensedBold, Arial, sans-serif;

@sapUiFontHeaderFamily: @sapUiFontFamily;

@sapUiFontHeaderWeight: normal;


// use these "sapM"-prefixed parameters for sap.m controls
@sapMFontHeader1Size: 1.625rem;  //  26px
@sapMFontHeader2Size: 1.375rem;  //  22px
@sapMFontHeader3Size: 1.250rem;  //  20px
@sapMFontHeader4Size: 1.125rem;  //  18px
@sapMFontHeader5Size: 1rem;      //  16px
@sapMFontHeader6Size: 0.875rem;  //  14px


@sapMFontSmallSize: 0.75rem;   // 12px
@sapMFontMediumSize: 0.875rem; // 14px
@sapMFontLargeSize: 1rem;      // 16px


@sapUiTranslucentBGOpacity: 80%;

@sapMPlatformDependent: false;



// =====================================
// Desktop (sap.ui.commons)
// =====================================

@sapUiDesktopFontFamily: @sapUiFontFamily;

@sapUiDesktopFontSize: 12px;


// use these for desktop controls only
@sapUiFontLargeSize: 13px;
@sapUiFontSmallSize: 11px;
@sapUiFontHeader1Size: 26px;
@sapUiFontHeader2Size: 20px;
@sapUiFontHeader3Size: 18px;
@sapUiFontHeader4Size: 16px;
@sapUiFontHeader5Size: 14px;
@sapUiFontHeader6Size: @sapUiFontLargeSize;

@sapUiLineHeight: 18px;


// ===============================================
// SOME important control-specific parameters...
// Derived from Expert Theming
// (these Parameters should be linked in controls)
// ===============================================

// Derived Chart Colors

@sapUiChartLabelHoverColor: @sapUiButtonHoverBackground;
@sapUiChartLabelPressedColor: darken(@sapUiButtonBackground, 17);
@sapUiChartCategoryAxisLabelFontColor: @sapUiContentForegroundTextColor;
@sapUiChartValueAxisLabelFontColor: lighten(@sapUiContentForegroundTextColor, 24);
@sapUiChartCategoryAxisLabelFontSize: @sapMFontSmallSize;
@sapUiChartValueAxisLabelFontSize: @sapMFontSmallSize;
@sapUiChartCategoryAxisLineColor: darken(@sapUiChartGridlineColor, 10);
@sapUiChartValueAxisLineColor: darken(@sapUiChartGridlineColor, 10);
@sapUiChartCategoryAxisTickColor: darken(@sapUiChartGridlineColor, 10);
@sapUiChartValueAxisTickColor: darken(@sapUiChartGridlineColor, 10);
@sapUiChartBackgroundColor: transparent;
@sapUiChartLabelFontWeight: normal;
@sapUiChartLegendLabelFontColor: @sapUiContentForegroundTextColor;
@sapUiChartLegendTitleFontColor: @sapUiGroupTitleTextColor;
@sapUiChartLegendTitleFontSize: @sapMFontMediumSize;
@sapUiChartLegendLabelFontSize: @sapMFontSmallSize;
@sapUiChartPaletteUndefinedColor: @sapUiBaseText;
@sapUiChartGridlineColor: lighten(@sapUiContentForegroundBorderColor, 15);
@sapUiChartReferenceLineColor: darken(@sapUiChartGridlineColor, 70);
@sapUiChartDataLabelFontColor: @sapUiBaseText;
@sapUiChartReferenceLineLabelColor: @sapUiBaseText;
@sapUiChartDataLabelFontSize: @sapMFontSmallSize;
@sapUiChartPopoverDataItemFontColor: @sapUiBaseText;
@sapUiChartPopoverGroupFontColor: @sapUiContentForegroundTextColor;
@sapUiChartPopoverDataItemFontSize: @sapMFontMediumSize;
@sapUiChartPopoverGroupFontSize: @sapMFontMediumSize;
@sapUiChartPopoverGroupFontWeight: bold;
@sapUiChartScrollBarThumbColor: @sapUiScrollBarFaceColor;
@sapUiChartScrollBarTrackColor: @sapUiScrollBarTrackColor;
@sapUiChartScrollBarThumbHoverColor: @sapUiScrollBarHoverFaceColor;
@sapUiChartMainTitleFontColor: @sapUiGroupTitleTextColor;
@sapUiChartAxisTitleFontColor: @sapUiGroupTitleTextColor;
@sapUiChartMainTitleFontSize: @sapMFontLargeSize;
@sapUiChartAxisTitleFontSize: @sapMFontSmallSize;
@sapUiChartTitleFontWeight: bold;
@sapUiChartAxisTitleFontWeight: regular;
@sapUiChartLightText: lighten(@sapUiContentForegroundTextColor, 24);
@sapUiChartZeroAxisColor: darken(@sapUiChartGridlineColor, 50);

@sapUiChartDataPointBorderColor: lighten(@sapUiGroupContentBackground, 2);
@sapUiChartDataPointBorderHoverSelectedColor: darken(@sapUiChartGridlineColor, 50);
@sapUiChartDataPointNotSelectedBackgroundOpacity: 0.6;

@sapUiChartValueAxisLineOpacity: 0;
@sapUiChartCategoryAxisLabelFontHoverColor: @sapUiContentForegroundTextColor;
@sapUiChartCategoryAxisLabelFontPressedColor: @sapUiContentForegroundTextColor;

@sapUiChartTargetColor: darken(@sapUiChartGridlineColor, 70);
@sapUiChartTargetShadowColor: @sapUiContentContrastShadowColor;
@sapUiChartBubbleBGOpacity: 0.8;

@sapUiChartScrollbarBorderColor: lighten(@sapUiScrollBarBorderColor, 25);
@sapUiChartScrollbarBorderSize: 0;
@sapUiChartScrollbarThumbPadding: 0;

@sapUiChartNegativeLargeText: @sapUiChartBad;
@sapUiChartCriticalLargeText: @sapUiChartCritical;
@sapUiChartPositiveLargeText: @sapUiChartGood;
@sapUiChartNeutralLargeText: saturate(darken(@sapUiChartNeutral, 10), 1);

@sapUiChartDataPointBG: saturate(lighten(@sapUiChartNeutral, 30), 1);
@sapUiChartDataPointBGBorderColor: saturate(lighten(@sapUiChartNeutral, 30), 1);
@sapUiChartDataLineColorWithBG: darken(@sapUiChartGridlineColor, 70);
@sapUiChartDataLineColor: darken(@sapUiChartGridlineColor, 70);

@sapUiChartRadialRemainingCircle: lighten(@sapUiChartNeutral, 35);
@sapUiChartRadialRemainingCircleBorderColor: lighten(@sapUiChartNeutral, 35);
@sapUiChartRadialBG: lighten(@sapUiGroupContentBackground, 2);

@sapUiChartLegendHoverBackground: @sapUiListHoverBackground;
@sapUiChartLegendSelectionBackground: @sapUiListSelectionBackgroundColor;
@sapUiChartLegendSelectionHoverBackground: @sapUiListSelectionHoverBackground;


// qualitative palette

@sapUiChartPaletteQualitativeHue1: @sapUiChart1;
@sapUiChartPaletteQualitativeHue2: @sapUiChart2;
@sapUiChartPaletteQualitativeHue3: @sapUiChart3;
@sapUiChartPaletteQualitativeHue4: @sapUiChart4;
@sapUiChartPaletteQualitativeHue5: @sapUiChart5;
@sapUiChartPaletteQualitativeHue6: @sapUiChart6;
@sapUiChartPaletteQualitativeHue7: @sapUiChart7;
@sapUiChartPaletteQualitativeHue8: @sapUiChart8;
@sapUiChartPaletteQualitativeHue9: @sapUiChart9;
@sapUiChartPaletteQualitativeHue10: @sapUiChart10;
@sapUiChartPaletteQualitativeHue11: @sapUiChart11;
@sapUiChartPaletteQualitativeHue12: darken(saturate(@sapUiChartSequence1, 15), 17);
@sapUiChartPaletteQualitativeHue13: darken(saturate(@sapUiChartSequence2, 8), 16);
@sapUiChartPaletteQualitativeHue14: darken(saturate(@sapUiChartSequence3, 5), 10);
@sapUiChartPaletteQualitativeHue15: darken(saturate(@sapUiChartSequence4, 2), 18);
@sapUiChartPaletteQualitativeHue16: darken(saturate(@sapUiChartSequence5, 18), 17);
@sapUiChartPaletteQualitativeHue17: darken(saturate(@sapUiChartSequence6, 2), 11);
@sapUiChartPaletteQualitativeHue18: darken(saturate(@sapUiChartSequence7, 1), 19);
@sapUiChartPaletteQualitativeHue19: darken(saturate(@sapUiChartSequence8, 11), 13);
@sapUiChartPaletteQualitativeHue20: darken(saturate(@sapUiChartSequence9, 27), 19);
@sapUiChartPaletteQualitativeHue21: darken(saturate(@sapUiChartSequence10,8),19);
@sapUiChartPaletteQualitativeHue22: darken(saturate(@sapUiChartSequence11, 9) ,11);

// semantic palette

@sapUiChartPaletteSemanticBadLight3: lighten(@sapUiChartBad, 32);
@sapUiChartPaletteSemanticBadLight2: lighten(@sapUiChartBad, 22);
@sapUiChartPaletteSemanticBadLight1: lighten(@sapUiChartBad, 12);
@sapUiChartPaletteSemanticBad: @sapUiChartBad;
@sapUiChartPaletteSemanticBadDark1: darken(desaturate(@sapUiChartBad, 1), 7);
@sapUiChartPaletteSemanticBadDark2: darken(desaturate(@sapUiChartBad, 1), 15);

@sapUiChartPaletteSemanticCriticalLight3: lighten(@sapUiChartCritical, 30);
@sapUiChartPaletteSemanticCriticalLight2: lighten(@sapUiChartCritical, 17);
@sapUiChartPaletteSemanticCriticalLight1: lighten(@sapUiChartCritical, 7);
@sapUiChartPaletteSemanticCritical: @sapUiChartCritical;
@sapUiChartPaletteSemanticCriticalDark1: darken(@sapUiChartCritical, 5);
@sapUiChartPaletteSemanticCriticalDark2: darken(@sapUiChartCritical, 12);

@sapUiChartPaletteSemanticGoodLight3: lighten(@sapUiChartGood, 30);
@sapUiChartPaletteSemanticGoodLight2: lighten(@sapUiChartGood, 17);
@sapUiChartPaletteSemanticGoodLight1: lighten(@sapUiChartGood, 7);
@sapUiChartPaletteSemanticGood: @sapUiChartGood;
@sapUiChartPaletteSemanticGoodDark1: darken(@sapUiChartGood, 7);
@sapUiChartPaletteSemanticGoodDark2: darken(@sapUiChartGood, 15);

@sapUiChartPaletteSemanticNeutralLight3: saturate(lighten(@sapUiChartNeutral, 30), 1);
@sapUiChartPaletteSemanticNeutralLight2: saturate(lighten(@sapUiChartNeutral, 20), 1);
@sapUiChartPaletteSemanticNeutralLight1: saturate(lighten(@sapUiChartNeutral, 10), 1);
@sapUiChartPaletteSemanticNeutral: @sapUiChartNeutral;
@sapUiChartPaletteSemanticNeutralDark1: saturate(darken(@sapUiChartNeutral, 10), 1);
@sapUiChartPaletteSemanticNeutralDark2: saturate(darken(@sapUiChartNeutral, 17), 1);

// sequential palette

@sapUiChartPaletteSequentialHue1Light3: lighten(desaturate(@sapUiChartSequence1, 9), 24);
@sapUiChartPaletteSequentialHue1Light2: lighten(desaturate(@sapUiChartSequence1, 9), 17);
@sapUiChartPaletteSequentialHue1Light1: lighten(desaturate(@sapUiChartSequence1, 10), 8);
@sapUiChartPaletteSequentialHue1: @sapUiChartSequence1;
@sapUiChartPaletteSequentialHue1Dark1: darken(saturate(@sapUiChartSequence1, 6), 8);
@sapUiChartPaletteSequentialHue1Dark2: darken(saturate(@sapUiChartSequence1, 15), 17);

@sapUiChartPaletteSequentialHue2Light3: lighten(saturate(@sapUiChartSequence2, 9), 29);
@sapUiChartPaletteSequentialHue2Light2: lighten(desaturate(@sapUiChartSequence2, 2), 19);
@sapUiChartPaletteSequentialHue2Light1: lighten(desaturate(@sapUiChartSequence2, 9), 9);
@sapUiChartPaletteSequentialHue2: @sapUiChartSequence2;
@sapUiChartPaletteSequentialHue2Dark1: darken(saturate(@sapUiChartSequence2, 4), 8);
@sapUiChartPaletteSequentialHue2Dark2: darken(saturate(@sapUiChartSequence2, 8), 16);

@sapUiChartPaletteSequentialHue3Light3: lighten(desaturate(@sapUiChartSequence3, 56), 40);
@sapUiChartPaletteSequentialHue3Light2: lighten(desaturate(@sapUiChartSequence3, 59), 26);
@sapUiChartPaletteSequentialHue3Light1: lighten(desaturate(@sapUiChartSequence3, 39), 13);
@sapUiChartPaletteSequentialHue3: @sapUiChartSequence3;
@sapUiChartPaletteSequentialHue3Dark1: darken(saturate(@sapUiChartSequence3, 2), 5);
@sapUiChartPaletteSequentialHue3Dark2: darken(saturate(@sapUiChartSequence3, 5), 10);

@sapUiChartPaletteSequentialHue4Light3: lighten(desaturate(@sapUiChartSequence4, 23), 30);
@sapUiChartPaletteSequentialHue4Light2: lighten(desaturate(@sapUiChartSequence4, 10), 20);
@sapUiChartPaletteSequentialHue4Light1: lighten(desaturate(@sapUiChartSequence4, 4), 10);
@sapUiChartPaletteSequentialHue4: @sapUiChartSequence4;
@sapUiChartPaletteSequentialHue4Dark1: darken(saturate(@sapUiChartSequence4, 1), 9);
@sapUiChartPaletteSequentialHue4Dark2: darken(saturate(@sapUiChartSequence4, 2), 18);

@sapUiChartPaletteSequentialHue5Light3: lighten(desaturate(@sapUiChartSequence5, 17), 35);
@sapUiChartPaletteSequentialHue5Light2: lighten(desaturate(@sapUiChartSequence5, 15), 24);
@sapUiChartPaletteSequentialHue5Light1: lighten(desaturate(@sapUiChartSequence5, 14), 11);
@sapUiChartPaletteSequentialHue5: @sapUiChartSequence5;
@sapUiChartPaletteSequentialHue5Dark1: darken(saturate(@sapUiChartSequence5, 8), 9);
@sapUiChartPaletteSequentialHue5Dark2: darken(saturate(@sapUiChartSequence5, 18), 17);

@sapUiChartPaletteSequentialHue6Light3: lighten(desaturate(@sapUiChartSequence6, 62), 46);
@sapUiChartPaletteSequentialHue6Light2: lighten(desaturate(@sapUiChartSequence6, 60), 30);
@sapUiChartPaletteSequentialHue6Light1: lighten(desaturate(@sapUiChartSequence6, 47), 15);
@sapUiChartPaletteSequentialHue6: @sapUiChartSequence6;
@sapUiChartPaletteSequentialHue6Dark1: darken(saturate(@sapUiChartSequence6, 1), 5);
@sapUiChartPaletteSequentialHue6Dark2: darken(saturate(@sapUiChartSequence6, 2), 11);

@sapUiChartPaletteSequentialHue7Light3: lighten(desaturate(@sapUiChartSequence7, 14), 30);
@sapUiChartPaletteSequentialHue7Light2: lighten(desaturate(@sapUiChartSequence7, 6), 20);
@sapUiChartPaletteSequentialHue7Light1: lighten(desaturate(@sapUiChartSequence7, 2), 10);
@sapUiChartPaletteSequentialHue7: @sapUiChartSequence7;
@sapUiChartPaletteSequentialHue7Dark1: darken(desaturate(@sapUiChartSequence7, 5), 9);
@sapUiChartPaletteSequentialHue7Dark2: darken(saturate(@sapUiChartSequence7, 1), 19);

@sapUiChartPaletteSequentialHue8Light3: lighten(desaturate(@sapUiChartSequence8, 43), 41);
@sapUiChartPaletteSequentialHue8Light2: lighten(desaturate(@sapUiChartSequence8, 40), 28);
@sapUiChartPaletteSequentialHue8Light1: lighten(desaturate(@sapUiChartSequence8, 36), 14);
@sapUiChartPaletteSequentialHue8: @sapUiChartSequence8;
@sapUiChartPaletteSequentialHue8Dark1: darken(saturate(@sapUiChartSequence8, 5), 6);
@sapUiChartPaletteSequentialHue8Dark2: darken(saturate(@sapUiChartSequence8, 11), 13);

@sapUiChartPaletteSequentialHue9Light3: lighten(desaturate(@sapUiChartSequence9, 17), 40);
@sapUiChartPaletteSequentialHue9Light2: lighten(desaturate(@sapUiChartSequence9, 15), 26);
@sapUiChartPaletteSequentialHue9Light1: lighten(desaturate(@sapUiChartSequence9, 12), 14);
@sapUiChartPaletteSequentialHue9: @sapUiChartSequence9;
@sapUiChartPaletteSequentialHue9Dark1: darken(saturate(@sapUiChartSequence9, 7), 10);
@sapUiChartPaletteSequentialHue9Dark2: darken(saturate(@sapUiChartSequence9, 27), 19);

@sapUiChartPaletteSequentialHue10Light3: lighten(saturate(@sapUiChartSequence10, 14), 34);
@sapUiChartPaletteSequentialHue10Light2: lighten(saturate(@sapUiChartSequence10, 5), 22);
@sapUiChartPaletteSequentialHue10Light1: lighten(saturate(@sapUiChartSequence10, 2), 11);
@sapUiChartPaletteSequentialHue10: @sapUiChartSequence10;
@sapUiChartPaletteSequentialHue10Dark1: darken(desaturate(@sapUiChartSequence10, 2), 9);
@sapUiChartPaletteSequentialHue10Dark2: darken(saturate(@sapUiChartSequence10, 8), 19);

@sapUiChartPaletteSequentialHue11Light3: lighten(desaturate(@sapUiChartSequence11, 57), 35);
@sapUiChartPaletteSequentialHue11Light2: lighten(desaturate(@sapUiChartSequence11, 52), 24);
@sapUiChartPaletteSequentialHue11Light1: lighten(desaturate(@sapUiChartSequence11, 35), 12);
@sapUiChartPaletteSequentialHue11: @sapUiChartSequence11;
@sapUiChartPaletteSequentialHue11Dark1: darken(saturate(@sapUiChartSequence11, 4), 6);
@sapUiChartPaletteSequentialHue11Dark2: darken(saturate(@sapUiChartSequence11, 9), 11);

@sapUiChartPaletteSequentialNeutralLight3: saturate(lighten(@sapUiChartSequenceNeutral, 30), 1);
@sapUiChartPaletteSequentialNeutralLight2: saturate(lighten(@sapUiChartSequenceNeutral, 20), 1);
@sapUiChartPaletteSequentialNeutralLight1: saturate(lighten(@sapUiChartSequenceNeutral, 10), 1);
@sapUiChartPaletteSequentialNeutral: @sapUiChartSequenceNeutral;
@sapUiChartPaletteSequentialNeutralDark1: saturate(darken(@sapUiChartSequenceNeutral, 10), 1);
@sapUiChartPaletteSequentialNeutralDark2: saturate(darken(@sapUiChartSequenceNeutral, 17), 1);

@sapUiChartPaletteNoSemDiv1Light3: #f3dec9;
@sapUiChartPaletteNoSemDiv1Light2: #e3cbb3;
@sapUiChartPaletteNoSemDiv1Light1: #c8ab8e;
@sapUiChartPaletteNoSemDiv1: #b08e6d;
@sapUiChartPaletteNoSemDiv1Dark1: #8e6c4b;
@sapUiChartPaletteNoSemDiv1Dark2: #754f2a;

@sapUiChartPaletteMidArea: desaturate(lighten(@sapUiChartSequenceNeutral, 40), 7);

@sapUiChoroplethBG: lighten(@sapUiChartSequenceNeutral, 42);
@sapUiChoroplethRegionBorder: lighten(@sapUiChartGridlineColor, 10);
@sapUiChoroplethRegionBG: @sapUiChartPaletteSemanticNeutralLight2;
@sapUiMapLegendBG: lighten(@sapUiGroupContentBackground, 2);
@sapUiMapLegendBorderColor: darken(@sapUiChartGridlineColor, 10);


// Shell
@sapUiShellHoverBackground: @sapUiBrand;
@sapUiShellActiveBackground: @sapUiBrand;
@sapUiShellActiveTextColor: @sapUiBaseText;
@sapUiShellHoverToggleBackground: @sapUiSelected;
@sapUiShellContainerBackground: @sapUiShellBackground;
@sapUiShellAltContainerBackground: @sapUiShellBackground;
@sapUiShellGroupTextColor: contrast(@sapUiShellBackground, @sapUiShellTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);

@sapUiUx3ShellHeaderColor: @sapShellColor;
@sapUiUx3ShellBackgroundColor: @sapUiExtraLightBG;
@sapUiUx3ShellHoverColor: @sapUiBaseText;
@sapUiUx3ShellGradientBottom: lighten(@sapUiUx3ShellHeaderColor, 17.3);			// transparent
@sapUiUx3ShellGradientTop: spin(mix(@sapUiHighlight, lighten(@sapUiUx3ShellGradientBottom, 22), 3), 9);			// transparent

// Approved by UX to use a hard coded color value for this
@sapUiUx3ShellToolPaletteIconFontColor: #8899aa;

// Exact
@sapUiUx3ExactLstExpandOffset: 0 0;
@sapUiUx3ExactLstRootExpandOffset: 0 3;
@sapUiUx3ExactLstContentTop: @sapUiUx3ExactLstHeaderHeight;

// Link
@sapUiLinkActive:     @sapUiLink;
@sapUiLinkVisited:    @sapUiLink;
@sapUiLinkHover:      @sapUiLink;
@sapUiLinkInverted:   @sapUiLink;

// Notification Bar
@sapUiNotificationBarBG: fade(@sapUiMediumText, 92%);
@sapUiNotifierSeparator: @sapUiMediumLine;
@sapUiNotifierSeparatorWidth: ~"2px";
@sapUiNotificationBarBorder: @sapUiNotificationBarBG;

// ToolPopup
@sapUiUx3ToolPopupInverted: ~"true"; // Telling the ToolPopup if it's inverted per default
@sapUiUx3ToolPopupArrowRightMarginCorrection: -2px;
@sapUiUx3ToolPopupShadow: 0px 6px 12px 0px fade(@sapUiContentShadowColor, 30);

// Callout
@sapUiCalloutShadow: 0px 6px 12px 0px fade(@sapUiContentShadowColor, 30);

@sapUiButtonIconColor: contrast(@sapUiButtonBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiButtonActiveBackground: @sapUiHighlight;
@sapUiButtonActiveBorderColor: @sapUiButtonActiveBackground;
@sapUiButtonActiveTextColor: contrast(@sapUiButtonActiveBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonEmphasizedHoverBackground: darken(@sapUiButtonEmphasizedBackground, 5);
@sapUiButtonEmphasizedHoverBorderColor: darken(@sapUiButtonEmphasizedBackground, 5);
@sapUiButtonEmphasizedActiveBackground: @sapUiButtonActiveBackground;
@sapUiButtonEmphasizedActiveBorderColor: @sapUiButtonActiveBorderColor;
@sapUiButtonEmphasizedTextShadow: contrast(@sapUiButtonEmphasizedBackground, fade(@sapUiContentShadowColor, 50), fade(@sapUiContentContrastShadowColor, 50), @sapUiContentContrastTextThreshold);
@sapUiButtonAcceptBorderColor: @sapUiPositiveElement;
@sapUiButtonAcceptHoverBackground: @sapUiButtonHoverBackground;
@sapUiButtonAcceptHoverBorderColor: @sapUiButtonAcceptBorderColor;
@sapUiButtonAcceptActiveBackground: @sapUiPositiveElement;
@sapUiButtonAcceptActiveBorderColor: @sapUiButtonAcceptBorderColor;
@sapUiButtonAcceptTextColor: contrast(@sapUiButtonAcceptBackground, @sapUiPositiveText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonRejectBorderColor: @sapUiNegativeElement;
@sapUiButtonRejectHoverBackground: @sapUiButtonHoverBackground;
@sapUiButtonRejectHoverBorderColor: @sapUiButtonRejectBorderColor;
@sapUiButtonRejectActiveBackground: @sapUiNegativeElement;
@sapUiButtonRejectActiveBorderColor: @sapUiButtonRejectBorderColor;
@sapUiButtonRejectTextColor: contrast(@sapUiButtonRejectBackground, @sapUiNegativeText, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonLiteBackground: rgba(0,0,0,0); // transparent;
@sapUiButtonLiteBorderColor: rgba(0,0,0,0); // transparent;
@sapUiButtonLiteTextColor: @sapUiButtonTextColor;
@sapUiButtonLiteHoverBackground: fade(darken(@sapUiButtonHoverBackground, 17), 50);
@sapUiButtonLiteHoverBorderColor: @sapUiButtonLiteHoverBackground;
@sapUiButtonLiteActiveBackground: @sapUiButtonActiveBackground;
@sapUiButtonLiteActiveBorderColor: @sapUiButtonLiteActiveBackground;
@sapUiButtonHeaderTextColor: @sapUiButtonTextColor;
@sapUiButtonHeaderDisabledTextColor: @sapUiButtonHeaderTextColor;
@sapUiButtonFooterTextColor: contrast(@sapUiPageFooterBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiButtonFooterHoverBackground: @sapUiButtonLiteHoverBackground;
@sapUiButtonActionSelectBackground: @sapUiListBackground;
@sapUiButtonActionSelectBorderColor: @sapUiListBorderColor;
@sapUiButtonLiteActionSelectHoverBackground: @sapUiListHoverBackground;
@sapUiToggleButtonPressedBackground: @sapUiButtonActiveBackground;
@sapUiToggleButtonPressedBorderColor:  darken(@sapUiToggleButtonPressedBackground, 5);
@sapUiToggleButtonPressedTextColor: contrast(@sapUiToggleButtonPressedBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiToggleButtonPressedHoverBackground: darken(@sapUiToggleButtonPressedBackground, 5);
@sapUiToggleButtonPressedHoverBorderColor: darken(@sapUiToggleButtonPressedBackground, 5);
@sapUiSegmentedButtonBackground: lighten(@sapUiButtonBackground, 3);
@sapUiSegmentedButtonBorderColor: lighten(@sapUiButtonBorderColor, 8);
@sapUiSegmentedButtonTextColor: contrast(@sapUiSegmentedButtonBackground, @sapUiButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonHoverBackground: @sapUiButtonHoverBackground;
@sapUiSegmentedButtonActiveBackground: @sapUiButtonActiveBackground;
@sapUiSegmentedButtonActiveTextColor: contrast(@sapUiSegmentedButtonActiveBackground, @sapUiSegmentedButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedBackground: @sapUiButtonActiveBackground;
@sapUiSegmentedButtonSelectedTextColor: contrast(@sapUiSegmentedButtonSelectedBackground, @sapUiSegmentedButtonTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedHoverBackground: darken(@sapUiSegmentedButtonSelectedBackground, 5);
@sapUiSegmentedButtonSelectedHoverBorderColor: @sapUiSegmentedButtonSelectedHoverBackground;
@sapUiSegmentedButtonIconColor: contrast(@sapUiSegmentedButtonBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonActiveIconColor: contrast(@sapUiSegmentedButtonActiveBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonSelectedIconColor: contrast(@sapUiSegmentedButtonSelectedBackground, @sapUiContentIconColor, @sapUiContentContrastIconColor, @sapUiContentContrastTextThreshold);
@sapUiSegmentedButtonFooterBorderColor: lighten(@sapUiButtonBorderColor, 8);
@sapUiSegmentedButtonFooterHoverBackground: @sapUiButtonHoverBackground;

@sapUiFieldTextColor: @sapUiBaseText;
@sapUiFieldActiveBackground: @sapUiHighlight;
@sapUiFieldActiveBorderColor: @sapUiHighlight;
@sapUiFieldActiveTextColor: @sapUiContentContrastTextColor;
@sapUiFieldPlaceholderTextColor: lighten(@sapUiBaseText, 44);

@sapUiListTextColor: lighten(@sapUiBaseText, 20);
@sapUiListVerticalBorderColor: darken(@sapUiListBorderColor, 3);
@sapUiListActiveBackground: @sapUiListHighlightColor;
@sapUiListActiveTextColor: contrast(@sapUiListActiveBackground, @sapUiListTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListSelectionHoverBackground: contrast(@sapUiListSelectionBackgroundColor, darken(@sapUiListSelectionBackgroundColor, 3), lighten(@sapUiListSelectionBackgroundColor, 3));
@sapUiListFooterBackground: @sapUiPageFooterBackground;
@sapUiListFooterTextColor: @sapUiPageFooterTextColor;
@sapUiListGroupHeaderBackground: @sapUiListBackground;
@sapUiListTableGroupHeaderBackground: darken(@sapUiListBackground, 5);
@sapUiListTableGroupHeaderBorderColor: darken(@sapUiListBorderColor, 10);
@sapUiListTableGroupHeaderTextColor: contrast(@sapUiListTableGroupHeaderBackground, @sapUiListTextColor, @sapUiContentContrastTextColor, @sapUiContentContrastTextThreshold);
@sapUiListTableFooterBorder: darken(@sapUiListBorderColor, 10);
@sapUiListTableFixedBorder: darken(@sapUiListBorderColor, 30);
@sapUiListTableTextSize: 0.875rem;
@sapUiListTableIconSize: 1rem;

@sapUiPageFooterBorderColor: contrast(@sapUiPageFooterBackground, darken(@sapUiPageFooterBackground, 8), lighten(@sapUiPageFooterBackground, 12));

@sapUiInfobarHoverBackground: darken(@sapUiInfobarBackground, 8);
@sapUiInfobarActiveBackground: darken(@sapUiInfobarBackground, 15);

@sapUiObjectHeaderBorderColor: darken(@sapUiObjectHeaderBackground, 8);

@sapUiCalendarColorToday: #000;

@sapUiDragAndDropColor: @sapUiContentNonInteractiveIconColor;
@sapUiDragAndDropBackground: @sapUiGroupContentBackground;
@sapUiDragAndDropBorderColor: @sapUiContentForegroundBorderColor;
@sapUiDragAndDropActiveColor: @sapUiContentHelpColor;
@sapUiDragAndDropActiveBackground: @sapUiGroupContentBackground;
@sapUiDragAndDropActiveBorderColor: @sapUiContentHelpColor;

@sapUiShadowLevel0: 0 0 0 1px @sapUiContentShadowColor;
@sapUiShadowLevel1: 0 0.125rem 1rem 0 fade(@sapUiContentContrastShadowColor, 40), 0 0 0 2px @sapUiContentShadowColor;
@sapUiShadowLevel2: 0 0.625rem 2rem 0 fade(@sapUiContentContrastShadowColor, 50), 0 0 0 2px @sapUiContentShadowColor;
@sapUiShadowLevel3: 0 1.25rem 4rem 0 fade(@sapUiContentContrastShadowColor, 70), 0 0 0 2px @sapUiContentShadowColor;
@sapUiShadowText: none;
@sapUiShadowHeader: inset 0 -0.125rem @sapUiObjectHeaderBorderColor;

//images for shell
@sapUiUx3ShellHeaderImageURL: ~"";

@sapUiUx3ShellApplicationImageURL: @sapUiGlobalLogo;			// "Quick"




// Brand Colors
@sapUiActive: @sapUiHighlight;

// Accent Colors
@sapUiPurple: purple;
@sapUiOrange: orange;
@sapUiGreen: green;
@sapUiBlue: blue;
@sapUiRed: red;
@sapUiYellow: yellow;

// Base Colors
@sapUiBase: darken(@sapBaseColor, 100);			// #000000
@sapUiBaseBorder: @sapUiBase;
@sapUiBaseLine: @sapUiBase;

// Background Colors
// Grayscale Backgrounds
@sapUiWhite: #FFFFFF;
@sapUiWhiteBG: lighten(@sapBaseColor, 100);			// #ffffff
@sapUiExtraLightBG: @sapUiBaseBG;
@sapUiLightBG: lightgray;
@sapUiMediumBG: gray;
@sapUiDarkBG: darkgray;
@sapUiDeepBG: black;
@sapUiBlackBG: #000000;

// Tinted Backgrounds
@sapUiHoverBG: grey;
@sapUiMediumAltBG: grey;
@sapUiDarkAltBG: darkgrey;

// Button Background Colors
@sapUiButtonStandardBG: @sapUiBaseBG;
@sapUiButtonEmphasizedBG: yellow;
@sapUiButtonNegativeBG: red;
@sapUiButtonPositiveBG: green;

// Semantic Background Colors
@sapUiErrorBG: #FF9A90;
@sapUiWarningBG: #FAF2B0;
@sapUiReadOnlyBG: grey;

// Text Colors
@sapUiExtraLightText: lightgray;
@sapUiLightText: lightgray;
@sapUiMediumText: grey;
@sapUiDarkText: darkgrey;
@sapUiDeepText: black;
@sapUiText: @sapUiBaseText; // black
@sapUiTextInverted: lighten(@sapUiBaseText, 100%);			// #ffffff;

// Semantic Text Colors
@sapUiNegativeText: red;
@sapUiPositiveText: #B5E7A8;

// Grayscale Borders
@sapUiWhiteBorder: lighten(@sapUiBaseBorder, 100%);	// #ffffff
@sapUiExtraLightBorder: lightgrey;
@sapUiLightBorder: grey;
@sapUiMediumBorder: @sapUiBaseBorder;
@sapUiDarkBorder: @sapUiBaseBorder;
@sapUiBlackBorder: darken(@sapUiBaseBorder, 100%);	// #000000

// Semantic Border Colors
@sapUiErrorBorder: red;
@sapUiWarningBorder: yellow;

@sapUiElement: lightgrey;
@sapUiInvertedElement: #ffffff;

// Line Colors
@sapUiLightLine: lightgrey;
@sapUiMediumLine: grey;
@sapUiEmphasizedLine: @sapUiHighlight;
@sapUiDarkLine: darkgrey;

@sapUiLightShadowTint: #ffffff;
@sapUiDarkShadowTint: #000000;

@sapUiFocus: #000000;
@sapUiInvertedFocus: #ffffff;

@sapUiPageHeaderTextColor: @sapUiLightText;

@sapUiTileBackground: #ffffff;

// Table Colors
@sapUiTableRowBG: @sapUiWhite;
@sapUiTableRowAlternatingBG: @sapUiWhite;
@sapUiTableRowSelectionBG: @sapUiHighlight;
@sapUiTableRowSelectionReadOnlyBG: @sapUiHighlight;
@sapUiTableRowHoverBG: @sapUiHoverBG;

// MOBILE-specific, but still very global-like:
@sapUiListBG: #f7f7f7;


// ----------------------------------------------------------------------------------------
// TMP during LESS convertion ---- to be deleted
@sapUiTextColor: green; // may be required by SubstitutionRulesManager.css in inbox lib
@sapUiTextTitleColor: green;
@sapUiTextSelectionColor: green;

// ----------------------------------------------------------------------------------------

@sapUiTextDisabled: lighten(@sapUiText, 60%); // the color for disabled text
@sapUiTextSelection: @sapUiTextInverted; // the color for selected text
@sapUiTextfieldBackground: @sapUiWhite; // better to have an own parameter insted of using sapUiWhite

@sapUiFontMonospaceFamily: Lucida Console;     // the default monospacefont


// SOME important control-specific parameters...

//
//  This parameter is used in the Shell control to calculate the size when it grows.
//  !!! ONLY PX-VALUES ARE ALLOWED HERE.
//
@sapUiUx3ShellSideBarBaseWidth:       40px;
//
//  This parameter is used in the Shell control to calculate the size of the margin when showing
//  an overflow button in the right pane. As of 1.18.0 this value contains the _maximum_ height
//  of the overflow button, if the text inside the button is smaller, the button shrinks with it.
//  !!! ONLY PX-VALUES ARE ALLOWED HERE.
//
@sapUiUx3ShellPaneOverflowButtonHeight: 120px;

@sapUiUx3ExactLstCollapseWidth: 24px;
@sapUiUx3ExactLstHeaderHeight: 25px;

// NotificationBar
@sapUiNotificationBarBG_IE: @sapUiMediumText;
@sapUiNotifierHoverColor: @sapUiHighlight;
@sapUiNotificationText: contrast(@sapUiNotificationBarBG, @sapUiText, @sapUiTextInverted);
@sapUiNotificationTimestamp: contrast(@sapUiNotificationBarBG, lighten(@sapUiText,33), darken(@sapUiTextInverted,33));
@sapUiNotificationBarCalloutBorder: fade(@sapUiMediumText, 0%);
@sapUiNotificationBarCalloutBorder_IE: @sapUiNotificationBarBG_IE;
@sapUiNotificationBarCalloutArr: @sapUiNotificationBarBG;
@sapUiNotificationBarHeight: ~"40px";
@sapUiNotificationBarHeightMinimized: ~"0px";
// The maximized height will be calculated corresponding to the window's height.
@sapUiNotificationBarHeightMaximized: ~"40%";
@sapUiNotifierWidth: ~"40px";

// RatingIndicator
@sapUiRIIconPaddingXS: 1px;
@sapUiRIIconPaddingS: 0.125rem;
@sapUiRIIconPaddingM: 0.1875rem;
@sapUiRIIconPaddingL: 0.25rem;
@sapUiRIIconPaddingCozy: 0.1875rem;
@sapUiRIIconPaddingCompact: 0.125rem;
@sapUiRIIconPaddingCondensed: 0.125rem;
@sapUiRIIconPaddingDisplayOnly: 0.125rem;
@sapUiRIIconSizeCozy: 1.375rem;
@sapUiRIIconSizeCompact: 1rem;
@sapUiRIIconSizeCondensed: 1rem;
@sapUiRIIconSizeDisplayOnly: 1rem;

// ToolPopup
@sapUiUx3ToolPopupArrowWidth: 13px;
@sapUiUx3ToolPopupArrowHeight: 24px;
@sapUiUx3ToolPopupArrowRightMarginCorrectionInverted: -7px;
@sapUiUx3TPPaddingBottom: 50px;

// Button
@sapUiButtonEmphasizedDisabledBorderColor: @sapUiButtonEmphasizedBorderColor;
@sapUiButtonEmphasizedDisabledBackground: @sapUiButtonEmphasizedBackground;
@sapUiButtonAcceptDisabledBorderColor: @sapUiButtonAcceptBorderColor;
@sapUiButtonAcceptDisabledBackground: @sapUiButtonAcceptBackground;
@sapUiButtonRejectDisabledBorderColor: @sapUiButtonRejectBorderColor;
@sapUiButtonRejectDisabledBackground: @sapUiButtonRejectBackground;
@sapUiToggleButtonPressedDisabledBackground: @sapUiToggleButtonPressedBackground;
@sapUiToggleButtonPressedDisabledBorderColor: @sapUiToggleButtonPressedBorderColor;
@sapUiToggleButtonPressedDisabledTextColor: mix(@sapUiButtonTextColor, #fff, 25);

// semantic colors
@sapUiPositiveBG: @sapUiPositiveText; // no positive background defined by UX, but using text color as background may be confusing

// default shadow for popups
@sapUiShadowTint: #000;
@sapUiShadow: 5px 5px 10px fade(@sapUiShadowTint,50%);

// This parameter will be set to true by the Theme Designer when custom CSS has been added to a new custom theme
@sapUiThemeDesignerCustomCss:false;

// Default margins classes to be used by the application for all controls
@sapUiMarginTiny   : 0.5rem; // make tiny margin themable
@sapUiMarginSmall  : 1rem; // make small margin themable
@sapUiMarginMedium : 2rem; // make medium margin themable
@sapUiMarginLarge  : 3rem; // make large margin themable

//
// This is a mixin for creating the predefined container content padding
// classes:
// sapUiNoContainerContentPadding
// sapUiContainerContentPadding
// sapUiResponsiveContainerContentPadding
// These classes can be set on many UI5 containers and will
// add padding inside the container's content padding based
// on the selectors that are arguments for this mixin.
//
// Arguments to this function-like mixin are the rootClass selector and
// the content selector where the padding should be applied.
//

//
//  the sapLess-parser has problems with an escaped string as default value for the parameterized mixin
//  therefore we need to temporarily use a parameter assigning the default value
//
@sapUiEscapedEmptyString: ~"";

.sapUiContainerContentPadding(@rootClass, @contentSelector: @sapUiEscapedEmptyString) {
	@{rootClass}.sapUiContentPadding @{contentSelector} {
		padding: 1rem;
		box-sizing: border-box;
	}

	@media (max-width:599px) {
		.sapMSplitContainerHideMode > .sapMSplitContainerDetail @{rootClass}.sapUiResponsiveContentPadding @{contentSelector},
		.sapMSplitContainerPortrait > .sapMSplitContainerDetail @{rootClass}.sapUiResponsiveContentPadding @{contentSelector},
		@{rootClass}.sapUiResponsiveContentPadding @{contentSelector} {
			padding: 0;
		}
	}

	@media (min-width:600px) and (max-width:1023px) {
		.sapMSplitContainerHideMode > .sapMSplitContainerDetail @{rootClass}.sapUiResponsiveContentPadding @{contentSelector},
		@{rootClass}.sapUiResponsiveContentPadding @{contentSelector} {
			padding: 1rem;
			box-sizing: border-box;
		}
	}

	@media (min-width:1024px) {
		.sapMSplitContainerHideMode > .sapMSplitContainerDetail @{rootClass}.sapUiResponsiveContentPadding @{contentSelector},
		@{rootClass}.sapUiResponsiveContentPadding @{contentSelector} {
			padding: 1rem 2rem;
			box-sizing: border-box;
		}
	}

	// overrides the responsive settings for the split app master page
	.sapMSplitContainerMaster @{rootClass}.sapUiResponsiveContentPadding @{contentSelector} {
		padding: 0;
	}

	// overrides the responsive settings for the split app detail page
	.sapMSplitContainerDetail @{rootClass}.sapUiResponsiveContentPadding @{contentSelector} {
		padding: 1rem;
	}

	@{rootClass}.sapUiNoContentPadding @{contentSelector} {
		padding: 0;
	}
}

//
// This is a mixin for creating and styling magnifying glass icon from a control->HTML element
// so it can be used to enrich different controls using the LightBox.
//
// Parameters:
// * @controlClass - Class of the root control HTML element
// * @elementClass - Class of the internal control HTML element that will hold the magnifying glass icon
//
// Example usage inside the Image control:
// * .lightBoxMagnifyingGlassMixing(~".sapMLightBoxImage", ~".sapMLightBoxMagnifyingGlass");

// Theme specific parameters for the magnifying glass mixin - will be replaced for high contrast themes
@sapUiLightBoxMagnifyingGlassBorder: none;
@sapUiLightBoxMagnifyingGlassBackgroundColor: @sapUiLink;

.lightBoxMagnifyingGlassMixing(@controlClass, @elementClass) {
	@{controlClass} @{elementClass} {
		display: inline-block;
		width: 1rem;
		height: 1rem;
		position: absolute;
		background-color: @sapUiLightBoxMagnifyingGlassBackgroundColor;
		bottom: -0.125rem;
		right: -0.125rem;
		border-radius: 0.5rem;
		font-size: 0.75rem;
		pointer-events: none;
		border: @sapUiLightBoxMagnifyingGlassBorder;
		&:before {
			position: absolute;
			top: 1px;
			left: 3px;
			font-family: SAP-icons;
			content: "\e00d";
			color: @sapUiContentContrastIconColor;
		}
	}
}